<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // typeof 用于获取变量的数据类型
        console.log(typeof 3);               // number
        console.log(typeof "abc");           // string
        console.log(typeof true);           // boolean
        console.log(typeof { a: 3 });         // object
        console.log(typeof undefined);         // undefined
        console.log(typeof function () { })    // function

        // 值类型转换为对象
        console.log(3);
        console.log("3".length);
        console.log(typeof new String("abc")) //object



        // 字符串类型- String
        let str = new String("abc");
        console.log(str.length);               // 获取字符串的长度
        console.log(str.toLocaleUpperCase())   // 字符串大写
        console.log(str.toString())   // 获取字符串

        // 字符串专业符号 \t,制表符，\n换行符，\\ 斜杠符，\'单引号，\" 双引号
        // +可以连接字符串
        console.log("3" + "4"); // "34"
        // += 追加字符串

        console.log(str += "456") // "abc456"

        // 模板字面量 - 模板字面量 是允许嵌入表达式的字符串字面量；支持变量，表达式，函数，使用`${变量/表达式/函数}`，将计算表达式或函数的结果，然后作为字符串进行运算
        let a = `abc`;
        let b = 21;
        console.log(a); // abc
        console.log(`${b}`)
        console.log(`abc
        456`); // 多行字符串

        let lessons = [
            { title: '媒体查询响应式布局' }, { title: 'FLEX 弹性盒模型' }, { title: 'GRID 栅格系统' }
        ];

        function template() {
            return `<ul>
      ${lessons.map((item) => `
          <li>${item.title}</li>
      `).join('')}
  </ul>`;
        }
        document.body.innerHTML = template();

    </script>
</body>

</html>